<template>
  <div>
    <div>
      <el-button size="mini" @click="handleAdd()">新增</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.label }}</span>
        </template>
      </el-table-column>
      <el-table-column label="值">
        <template slot-scope="scope">
          <span>{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" size="mini"  icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- dialog 模态框 -->
    <el-dialog
      :title="dialogInfo.title"
      :visible.sync="dialogInfo.dialogVisible"
      :width="dialogInfo.width"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="50px">
        <el-form-item label="名称" prop="label">
          <el-input size="medium" v-model="ruleForm.label"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input size="medium" v-model="ruleForm.value"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input size="medium" v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="type">
          <el-input-number
            size="medium"
            v-model="ruleForm.sort"
            :step-strictly="true"
            controls-position="right"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input size="medium" v-model="ruleForm.remarks" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInfo.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDictItemList,
  updateDictItem,
  addDictItem,
  removeDictItem
} from "@/api/system/dict";
export default {
  name: "dictItem",
  data() {
    return {
      total: 0,
      tableData: [],
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        dictId: parseInt(this.$route.query.dictId)
      },
      dialogInfo: {
        dialogVisible: false,
        title: "",
        width: "30%"
      },
      ruleForm: {
        id: "",
        dictId: parseInt(this.$route.query.dictId),
        value: "",
        label: "",
        type: this.$route.query.type,
        description: "",
        remarks: "",
        sort: 0
      },
      rules: {
        value: [{ required: true, message: "请输入字典项值", trigger: "blur" }],
        label: [
          { required: true, message: "请输入字典项标题", trigger: "blur" }
        ],
        remarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getDictItemList(this.queryParams).then(resp => {
        if (resp.code == 0) {
          this.tableData = resp.data.item;
          this.total = resp.data.total;
        }
      });
    },
    // 每页条目数变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页数变化
    handleCurrentChange(val) {
      this.queryParams.pageIndex = val;
      this.getList();
    },
    // 成功提示
    notifySuccess(msg) {
      this.$notify({
        title: "成功",
        message: msg,
        type: "success"
      });
    },
    // 失败提示
    notifyErr(msg) {
      this.$notify({
        title: "错误",
        message: msg,
        type: "error"
      });
    },
    handleEdit(index, row) {
      // 打开dialog
      this.dialogInfo.title = "编辑";
      this.dialogInfo.dialogVisible = true;
      this.clearValidate("ruleForm");
      this.ruleForm.id = row.id;
      this.ruleForm.description = row.description;
      this.ruleForm.remarks = row.remarks;
      this.ruleForm.value = row.value;
      this.ruleForm.label = row.label;
      this.ruleForm.sort = row.sort;
    },
    // 删除字典选项
    handleDelete(index, row) {
      removeDictItem(row.id).then(resp => {
        if (resp.code == 0) {
          
          this.notifySuccess(resp.message);
          this.getList();
        }
      });
    },
    // 打开dialog
    handleAdd() {
      this.dialogInfo.title = "新增";
      this.dialogInfo.dialogVisible = true;
      this.resetForm();
      this.clearValidate("ruleForm");
    },
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // 判断是增加还是修改
          if (this.dialogInfo.title == "新增") {
            let obj = {
              dictId: this.ruleForm.dictId,
              value: this.ruleForm.value,
              label: this.ruleForm.label,
              type: this.ruleForm.type,
              description: this.ruleForm.description,
              sort: this.ruleForm.sort,
              remarks: this.ruleForm.remarks
            };
            addDictItem(obj).then(resp => {
              if (resp.code == 0) {
                this.notifySuccess(resp.message);
                this.closeDialog();
                this.getList();
              } else {
                this.notifyErr(resp.message);
              }
            });
          } else {
            let obj = {
              id: this.ruleForm.id,
              value: this.ruleForm.value,
              label: this.ruleForm.label,
              type: this.ruleForm.type,
              description: this.ruleForm.description,
              sort: this.ruleForm.sort,
              remarks: this.ruleForm.remarks
            };
            updateDictItem(obj).then(resp => {
              if (resp.code == 0) {
                this.notifySuccess(resp.message);
                this.closeDialog();
                this.getList();
              } else {
                this.notifyErr(resp.message);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭dialog
    closeDialog() {
      this.dialogInfo.dialogVisible = false;
    },
    resetForm() {
      this.ruleForm.id = "";
      this.ruleForm.description = "";
      this.ruleForm.remarks = "";
      this.ruleForm.value = "";
      this.ruleForm.label = "";
      this.ruleForm.sort = 0;
    },
    // 移除表单项的校验结果
    clearValidate(formName) {
      this.$nextTick(function() {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.$refs[formName].clearValidate();
      });
    }
  }
};
</script>